<template>
    <div class="todoList">
        <ul>
            <li v-for="(item,index) in list" :key="item.id">
                <div class="todoList_left">
                    <input type="checkbox" v-model="item.state" @change="changeHandler"/>
                    <span>{{ index + 1 }}</span>
                    <span>{{ item.content }}</span>
                </div>
                <button class="todoList_right" @click="delHandler(index)">X</button>
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        props:{
            list:Array
        },
        methods:{
            delHandler(i){
                this.$emit("del",i)
            },
            changeHandler(){
                this.$emit("change")
            }
        }
    }
</script>

<style scoped>
.todoList ul{
    padding: 0;
}
.todoList li{
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #c8c4c4;
    padding: 0.5rem;
}
.todoList_left input{
    margin-right: 10px;
}
.todoList_right{
    margin-right: 1rem;
}
</style>